<template>
  <el-scrollbar class="image-content">
    <el-image class="img" v-for="(src,index) in srcList" :key="src" :src="src" lazy fit="cover"
              :zoom-rate="1.2" :initial-index="index" :preview-src-list="srcList"/>
  </el-scrollbar>
</template>

<script lang="ts">
import {defineComponent, getCurrentInstance, ref, toRefs} from "vue";
import {httpGet, ipcApiRoute} from "@/api/router";

export default defineComponent({
  props: {
    currentCategory: {
      required: true,
      type: String
    }
  },
  setup(props, {emit, attrs, slots}) {

    const {currentCategory} = toRefs(props)
    // todo:

    const srcList = ref([
      'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
      'https://t7.baidu.com/it/u=3915743384,2060495762&fm=193&f=GIF',
      'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',
      'https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF',
      'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0623%2F0e114273j00qv5kse001bc000hs00qpc.jpg&thumbnail=650x2147483647&quality=80&type=jpg',
      'https://p5.itc.cn/q_70/images01/20210625/3ad26598023f464ab87ba8d75c0b0bed.jpeg',
      'https://img2.baidu.com/it/u=3106817668,881912661&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1082',
      'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0623%2F8f0bf7c3j00qv5kse0022c000hs00q6c.jpg&thumbnail=650x2147483647&quality=80&type=jpg',
      'https://5b0988e595225.cdn.sohucs.com/images/20190418/ee135774707043008daeea51b9b41eed.jpeg'
    ])

    const instance: any = getCurrentInstance()
    const {$ipc, $getHttpHost} = instance.appContext.config.globalProperties

    $getHttpHost().then((res: string) => {
      const uri = ipcApiRoute.getFiles;
      return httpGet(res + '/' + uri.split('.').join('/'))
    }).then((res: any) => {
      console.log(res);
    })

    return {
      srcList
    }
  }
})
</script>

<style scoped lang="less">
.image-content {
  .img {
    display: inline-block;
    width: calc(calc(100% / 3) - 20px);
    height: 400px;
    border-radius: 4px;
    margin: 10px;
    border: 1px solid rebeccapurple;
  }
}
</style>
